<template>
	<view class="merchant-join">
		<gyd-navbar back-color="#fff" :title="title"></gyd-navbar>

		<u-form class="form" labelPosition="left" :model="formData" :rules="rules" ref="formRef">
			<u-form-item class="form-item" label="商户类型" labelWidth="120" prop="user_type">
				<u-radio-group v-model="formData.user_type" @change="storeTypeChange">
					<u-radio v-for="(item,index) in storeTypeList" :key="index" :name="item.value" :label="item.name"
						:disabled="item.disabled"></u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item class="form-item" label="营业执照名称" labelWidth="120" prop="merchant_short_name">
				<u-input type="text" v-model="formData.merchant_short_name" placeholder="请填写营业执照名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="门头名称" labelWidth="120" prop="store_name">
				<u-input type="text" v-model="formData.store_name" placeholder="请填写门头名称"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="联系人" labelWidth="120" prop="contact_name">
				<u-input type="text" v-model="formData.contact_name" placeholder="请输入联系人"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="联系手机号" labelWidth="120" prop="contact_phone">
				<u-input type="number" v-model="formData.contact_phone" placeholder="请输入联系手机号"></u-input>
			</u-form-item>
			<u-form-item class="form-item" label="联系邮箱" labelWidth="120" prop="email">
				<u-input type="text" v-model="formData.email" placeholder="请输入联系邮箱"></u-input>
			</u-form-item>
		</u-form>
		<button type="primary" @click="submit()">提交</button>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '商户入驻',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		formData: {
			user_type: '1',
			merchant_short_name: '',
			store_name: '',
			contact_name: '',
			contact_phone: '',
			email: ''
		},
		storeTypeList: [{
			value: '1',
			name: '联盟商家',
			disabled: true,
		}, {
			value: '2',
			name: '加盟水站',
			disabled: true,
		}],
	});

	const rules = ref([]);
	const formRef = ref();

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('user_type')) {
			console.log('传递参数', opt.user_type);
			state.formData.user_type = opt.user_type;
		}
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function storeTypeChange(e) {
		console.log('店铺类型', e);
		state.formData.user_type = e + '';
	}

	function submit() {
		console.log('商户入驻提交', state.formData);
		let check = checkData();
		console.log('验证结果', check);
		if (!check) {
			return;
		}
		request.post('agent.merchant/add', state.formData).then(res => {
			console.log('商户入驻结果', res);
			util.showTip(res.msg)
			if (res.code == 1) {
				setTimeout(() => {
					pageRoute('/agentPages/merchant-manage/merchant-manage');
				}, 800);
			}
		});
	}

	function checkData() {
		if (!util.username(state.formData.merchant_short_name, '营业执照名称')) {
			return false;
		}
		if (!util.username(state.formData.store_name, '门头名称')) {
			return false;
		}
		if (!util.username(state.formData.contact_name, '联系人')) {
			return false;
		}
		if (!util.mobile(state.formData.contact_phone)) {
			return false;
		}
		if (!util.email(state.formData.email)) {
			return false;
		}
		return true;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		formData,
		storeTypeList,
	} = toRefs(state);
</script>

<style lang="scss">
	.merchant-join {
		.form {
			padding: $m24;

			.form-item {
				background: #fff;
				margin-bottom: $m16;
				padding: 0 $m24;
				border-radius: 10rpx;
			}
		}
	}
</style>